<template>
	<div style="position: relative;width: 750rpx;">
		<uni-transition ref="transition" :styles="{'width':'750rpx','height':'150rpx'}" :show="show" :duration="800"
			:mode-class="modeClass">
			<view class="big_box">
				<view class="donghua_box">
					<!-- <view class="avatar">
						<image :src="avatar" mode="" class="avatar_img"></image>
					</view> -->
					<view class="center">
						<text class="name"><text class="text"></text>{{name}}</text>
						<text class="song">正在去购买【{{song_name}}】</text>
					</view>
				</view>
			</view>
			<!-- <view class="liwu_box">
				<image class="liwu_img" :src="liwu_img" mode=""></image>
				<uni-transition ref="shuzi" :duration="100" :show="true">
					<text class="liwu_num">×{{num}}</text>
				</uni-transition>
			</view> -->
		</uni-transition>
	</div>
</template>

<script>
	export default {
		props: {
			// 头像
			avatar: {
				type: String,
				default: ''
			},
			// 名称
			name: {
				type: String,
				default: ''
			},
			// 接收人名称
			song_name: {
				type: String,
				default: ''
			},
			// 礼物图片
			// liwu_img: {
			// 	type: String,
			// 	default: ''
			// },
			// 数量
			// num: {
			// 	type: Number || String,
			// 	default: 1
			// },
			// 默认左侧出来
			modeClass: {
				type: String,
				default: 'slide-left'
			},
		},
		data() {
			return {
				show: false,
				timeID: null,
				StopTimeID: null,
				continuityTimeID: null,
			}
		},
		created() {
			this.$nextTick(() => {
				this.onCreated()
			})
		},
		mounted() {

		},
		methods: {
			onCreated() {
				this.show = true
				this.$emit("onCreated")
				if (this.timeID) clearTimeout(this.timeID)
				this.timeID = setTimeout(() => {
					this.onStop()
				}, 3800)

			},
			set_liansong() {
				if (!this.continuityTimeID) {
					this.continuityTimeID = setTimeout(() => {
						this.set_daxiao_num()
						this.onCreated()
						this.continuityTimeID = null
					}, 70)
				}
			},
			set_daxiao_num() {
				this.$refs.shuzi.step({
					scale: [0.7, 0.7]
				}, {
					duration: 20,
				})
				this.$refs.shuzi.step({
					scale: [1, 1]
				}, {
					delay: 20,
					duration: 50
				})
				this.$refs.shuzi.run()
			},
			onStop() {
				this.show = false
				if (this.StopTimeID) clearTimeout(this.StopTimeID)
				this.StopTimeID = setTimeout(() => {
					this.$emit("onStop")
				}, 800)

			},
		}
	}
</script>

<style scoped lang="scss">
	.big_box {
		background-color: rgba(0, 0, 0, 0.2);
		// height: 106rpx;
		width: 500rpx;
		position: absolute;
		left: 20rpx;
		top: 25rpx;
		border-radius: 50rpx;
		// z-index: 200;
	}

	.donghua_box {
		// background-color: green;
		background-color: rgba(255, 255, 255, 0.6);
		// border: 1rpx solid rgba(255, 255, 255, 0.8);
		// height: 100rpx;
		border-radius: 20rpx;
		// width: 350rpx;
		// width: auto;
		position: absolute;
		left: 3rpx;
		top: 3rpx;
		display: flex;
		align-items: center;
		flex-direction: row;
		width:100%;
		// padding-right: 30rpx;

		.avatar {
			padding-left: 20rpx;
			// .avatar_img {
			// 	width: 80rpx;
			// 	height: 80rpx;
			// 	border-radius: 50%;
			// }
		}

		.center {
			display: flex;
			flex-direction: column;
			padding-left: 20rpx;
			.name {
				font-size: 20rpx;
				color: #000;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				// #ifdef APP-NVUE
				lines: 1;
				text-overflow: ellipsis;
				// #endif
				.text{
					background-color: #f2414a;
					padding:2rpx;
					margin-right:10rpx;
					font-weight: bold;
				}
			}

			.song {
				font-size: 26rpx;
				color: #000;
				margin-bottom: 5rpx;
				padding-right:10rpx;
				// display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				// overflow: hidden;

				// #ifdef APP-NVUE
				lines: 1;
				text-overflow: ellipsis;
				// #endif
			}
		}

	}

	.liwu_box {
		display: flex;
		flex-direction: row;
		align-items: center;
		position: absolute;
		top: 0;
		left: 280rpx;
		z-index: 200;

		.liwu_img {
			width: 150rpx;
			height: 150rpx;
			box-sizing: border-box;
			padding: 10rpx;
		}

		.liwu_num {
			color: #ffec3a;
			font-size: 60rpx;
			font-weight: bold;
			text-shadow: 8rpx 8rpx 8rpx #f2414a;
		}
	}
</style>
